<template>
  <view class="content">
    <view class="l-fixed">
      <view class="l-head">
         <view class="l-cart-title">购物车</view>
			<button class="my-order-button" @tap="navigateToOrder">我的订单</button>
      </view>
    </view>

    <view class="l-body">
      <view class="l-empty-cart" v-if="cartItems.length === 0">
        <text>您的购物车是空的</text>
      </view>
      <view class="l-cart-items" v-else>
        <view class="l-cart-item" v-for="(item, index) in cartItems" :key="index">
          <view class="l-item">
            <view class="l-item-image">
              <image :src="item.coverImg" mode="aspectFill" class="book-cover"></image>
            </view>
            <view class="l-item-info">
              <view class="l-item-name">{{ item.bookName }}</view>
              <view class="l-item-price">¥{{ item.sumPrice }}</view>
              <view class="l-item-quantity">
                <button @tap="decreaseQuantity(index)">-</button>
                <text>{{ item.number }}</text>
                <button @tap="increaseQuantity(index)">+</button>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="l-cart-summary">
		  <button class="clear-cart-button" @tap="clearCart">清空购物车</button> 
        <text>总计: ¥{{ totalPrice }}</text>
		
        <button class="checkout-button" @tap="checkout">结算</button>
		
      </view>
    </view>
  </view>
</template>

<script>
	import Cookies from 'js-cookie';
	import config from '@/utils/config.js';
	export default {
	  data() {
		return {
		  cartItems: [] // 初始化为空数组，等待从后端获取数据填充
		};
	  },
	  computed: {
		totalPrice() {
		  return this.cartItems.reduce((total, item) => total + item.sumPrice * item.number, 0);
		}
	  },
	  methods: {
	   navigateToOrder() {
			// 获取当前页面栈信息
			const pages = getCurrentPages();
			if (pages.length >= 9) {
			  // 使用redirectTo关闭当前页面，跳转到目标页面，避免页面栈溢出
			  uni.redirectTo({
				url: `/pages/mine/myOrder`
			  });
			} else {
			  // 页面栈还有空间，正常使用navigateTo进行跳转
			  uni.navigateTo({
				url: `/pages/mine/myOrder`
			  });
			}
		  },
		increaseQuantity(index) {
		  this.cartItems[index].number++;
		},
		decreaseQuantity(index) {
		  if (this.cartItems[index].number > 1) {
			this.cartItems[index].number--;
		  }
		},
		 checkout() {
		  // 模拟结算过程，先显示结算总价的提示信息
		  uni.showToast({
			title: `结算总价: ¥${this.totalPrice}`,
			icon: 'none'
		  });
	
		  // 从Cookie获取token
		  const token = Cookies.get('token');
		  if (!token) {
			uni.hideLoading();
			uni.showToast({
			  icon: 'error',
			  title: '未获取到有效token，请先登录'
			});
			return;
		  }
	
		  uni.request({
			url: `${config.apiBaseUrl}/cart/clean`,
			method: 'PUT',
			header: {
			  'Content-Type': 'application/json',
			  'token': token
			},
			success: (res) => {
			  if (res.statusCode === 200 && res.data.code === 1) {
				// 接口调用成功，提示相应信息
				uni.showToast({
				  title: res.data.msg || '结算成功，已清空购物车并生成订单信息',
				  icon: 'success'
				});
				
				this.cartItems = [];
			  } else {
				console.error('结算并清空购物车失败，原因：', res.data.msg);
				uni.showToast({
				  title: '结算失败，请稍后再试',
				  icon: 'error'
				});
			  }
			},
			fail: (err) => {
			  console.error('请求结算并清空购物车接口出错：', err);
			  uni.showToast({
				title: '请求出错，请检查网络',
				icon: 'error'
			  });
			}
		  });
		},
		// 获取购物车数据的方法
		getCartData() {
			// 从Cookie获取token
			const token = Cookies.get('token');
			if (!token) {
				uni.hideLoading();
				uni.showToast({
					icon: 'error',
					title: '未获取到有效token，请先登录'
				});
				return;
			}
		 
		  uni.request({
			url: `${config.apiBaseUrl}/cart/list`,
			method: 'GET',
			header: {
				'Content-Type': 'application/json',
				'token': token
			},
			success: (res) => {
			  if (res.statusCode === 200 && res.data.code === 1) {
				// 如果接口返回的状态码表示成功（这里假设code为1表示成功）
				this.cartItems = res.data.data;
			  } else {
				console.error('获取购物车数据失败，原因：', res.data.msg);
			  }
			},
			fail: (err) => {
			  console.error('请求购物车数据接口出错：', err);
			}
		  });
		},
	  
	  clearCart() {
	        // 从Cookie获取token
	        const token = Cookies.get('token');
	        if (!token) {
	          uni.hideLoading();
	          uni.showToast({
	            icon: 'error',
	            title: '未获取到有效token，请先登录'
	          });
	          return;
	        }
	        uni.request({
	          url: `${config.apiBaseUrl}/cart/clear`,
	          method: 'DELETE',
	          header: {
	            'Content-Type': 'application/json',
	            'token': token
	          },
	          success: (res) => {
	            if (res.statusCode === 200 && res.data.code === 1) {
	              // 接口返回data为null，直接根据msg提示成功信息
	              uni.showToast({
	                title: res.data.msg,
	                icon: 'success'
	              });
	            } else {
	              console.error('清空购物车失败，原因：', res.data.msg);
	              uni.showToast({
	                title: '清空购物车失败，请稍后再试',
	                icon: 'error'
	              });
	            }
	          },
	          fail: (err) => {
	            console.error('请求清空购物车接口出错：', err);
	            uni.showToast({
	              title: '请求出错，请检查网络',
	              icon: 'error'
	            });
	          }
	        });
	      },
		  goToMyOrders() {
			uni.showToast({
			  title: '即将跳转到我的订单页面（此处为模拟，实际需完善跳转逻辑）',
			  icon: 'none'
			});
		  }
		},
	  mounted() {
		this.getCartData(); 
	  }
	};
</script>

<style>
	.content {
	  background-color: #f5f5f5;
	  color: #000;
	}

	.l-fixed {
	  position: fixed;
	  top: 0;
	  left: 0;
	  right: 0;
	  height: 100rpx;
	  background-color: #f5f5f5;
	}

	.l-head {
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  height: 100rpx;
	  background-color: #dfdfdf;
	}
	
	.my-order-button {
	  background-color: transparent;
	  border: none;
	  color: #333; 
	  font-size: 32rpx;
	  margin-left: auto; 
	}
	.my-order-button:active {
	  opacity: 0.8;
	}

	.l-cart-title {
	  font-size: 36rpx;
	  font-weight: bold;
	}

	.l-body {
	  padding-top: 100rpx;
	}

	.l-empty-cart {
	  text-align: center;
	  margin-top: 200rpx;
	  color: #888;
	}

	.l-cart-items {
	  margin-top: 20rpx;
	}

	.l-cart-item {
	  display: flex;
	  align-items: center;
	  margin-bottom: 20rpx;
	  padding: 10rpx;
	  background-color: #fff;
	  border-bottom: 1px solid #e0e0e0;
	}

	.l-item {
	  display: flex;
	  align-items: center;
	}

	.l-item-image {
	  width: 150rpx;
	  height: 210rpx;
	  margin-right: 20rpx;
	}

	.book-cover {
	  width: 100%;
	  height: 100%;
	  border-radius: 10rpx;
	}

	.l-item-info {
	  flex: 1;
	}

	.l-item-name {
	  font-size: 32rpx;
	  margin-bottom: 10rpx;
	}

	.l-item-price {
	  font-size: 28rpx;
	  color: #ff9800;
	}

	.l-item-quantity {
	  display: flex;
	  align-items: center;
	}

	button {
	  background-color: transparent;
	  border: none;
	  color: #ff9800;
	  font-size: 32rpx;
	  margin: 0 10rpx;
	}

	.l-cart-summary {
	  display: flex;
	  justify-content: flex-end; /* 将结算按钮推到最右边 */
	  align-items: center;
	  padding: 20rpx;
	  background-color: #fff;
	  position: fixed;
	  bottom: 120rpx; /* 调整位置，不要过于靠下 */
	  left: 0;
	  right: 0;
	}
	.clear-cart-button {
	  background-color: #ccc; /* 灰色背景色，可根据喜好调整 */
	  color: #333; /* 文字颜色，这里设为深灰色，可修改 */
	  padding: 10rpx 20rpx; /* 按钮内边距 */
	  border-radius: 5rpx; /* 圆角 */
	  font-size: 32rpx;
	  margin-left: 10rpx; /* 与结算按钮保持一定间距，可按需调整 */
	}

	.clear-cart-button:active {
	  opacity: 0.8; /* 点击时按钮有一点透明度变化，模拟按下效果，可调整数值改变效果 */
	}
	.checkout-button {
	  background-color: #ff4d4f; /* 红色背景 */
	  color: #fff; /* 白色文字 */
	  padding: 10rpx 20rpx; /* 按钮内边距 */
	  border-radius: 5rpx; /* 圆角 */
	  font-size: 32rpx;
	}

	button[disabled] {
	  color: #888;
	}
</style>